<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../static/plugins/bootstrap-3.4.1/css/bootstrap.min.css">
    <style>
        .buju {
            height: 700px;
            background-color: #cfba80;
        }

        .buju .col-buju {
            height: 700px;

        }

        .panel-body .list-group :hover {
            background-color: #a15d93;
            color: white;
        }
    </style>

</head>
<body>
{% load static %}


<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>


        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="/"><span
                        style="margin-top: 15px;font-size: 20px; color:blue;"><em><strong></strong>智慧房源平台</em></span>
                    <span class="sr-only">(current)</span></a></li>
            </ul>
            <p class="text-center " style="margin: 10px auto; font:18px bold;">{{ province }}各地区房源信息</p>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>


<div class="container-fluid clearfix buju " id="mianbao" style="height: 800px">
    <ol class="breadcrumb" style="margin-top: 10px" id="mianbao_data">
        <li><a href="/">大屏</a></li>
        <li><a href="/sdfy?province={{ province }}">{{ province }}房源</a></li>
        <li>{{ city }}市</li>

    </ol>
    <div class="col-xs-3 col-buju " style="background-color: #a15d93; ">

        <div class="panel panel-danger" style="height: 100%">
            <div class="panel-heading">
                <h3 class="panel-title">{{ city }}市</h3>
            </div>
            <div class="panel-body">
                <ul class="list-group" id="province_name">
                    {% for k,v in region_dict.items %}
                        <li class="list-group-item" onclick="clk_city(this,'{{ k }}')">
                            <span class="badge">{{ v }}</span> <span class="city-name">{{ k }}市</span>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>

    <div class="col-xs-9 col-buju" style="background-color: #7284bf;">
        <div id="city_map" style="height: 100%">

        </div>
    </div>
</div>


<script src="../static/js/jquery-3.7.1.js"></script>
<script src="../static/plugins/bootstrap-3.4.1/js/bootstrap.min.js"></script>
<script src="../static/plugins/echarts.js"></script>
<script type="text/javascript">

    $(function (){
        init_shandong();
    })

    // 解析数据并转换为适用于ECharts的数据格式
    function parseJinanData(jsonData) {
        var data = [];
        for (var i = 1; i < jsonData.length; i++) {
            var row = jsonData[i];
            if (row && row.length >= 3) {
                data.push({
                    name: row[0],   // 区县名称
                    value: row[1],  // 房源数量
                    avgPrice: row[2]  // 均价
                });
            }
        }
        return data;
    }


    var scatterData = [
        {
            value:[116.80,37.16]
        },
        {# { #}
        {#    value:[117.283042,31.86119]#}
        {# } #}
    ]

    // 初始化地图
    function initJinanMap(data, myChart) {
        myChart.hideLoading();

        // 使用地图数据 URL
        fetch('https://geo.datav.aliyun.com/areas_v3/bound/370100_full.json') // 济南市地图
            .then(response => response.json())
            .then(geoJson => {
                echarts.registerMap('jinan', geoJson);

                // 设置地图配置
                myChart.setOption({
                    title: {
                        text: '济南市各区房源数据',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: function (params) {
                            var avgPrice = params.data && params.data.avgPrice != null ? params.data.avgPrice : '未知';
                            var totalValue = params.data && params.data.value != null ? params.data.value : '未知';
                            return params.name + '<br/>' +
                                '房源数量: ' + totalValue + '<br/>' +
                                '均价: ' + avgPrice + '元/平方米';
                        },
                        textStyle: {
                            fontSize: 20 // 设置提示框字体大小为 12
                        }
                    },
                    visualMap: {
                        min: 0,
                        max: 25000,
                        left: 'left',
                        top: 'bottom',
                        text: ['高', '低'],
                        inRange: {
                            color: ['#e0f7fa', '#006064']
                        },
                        calculable: true
                    },
                    series: [
                        {
                            name: '房源数据',
                            type: 'map',
                            map: 'jinan',
                            label: {
                                show: true,
                                fontSize: 15
                            },
                            data: data
                        },
                        {
                            data:scatterData, // 配置散点的数据]
                            type: 'effectScatter', // 设置图表类型为散点图'
                            coordinateSystem: 'geo', // 设置坐标系为地理坐标系
                        }
                    ]
                });
            })
            .catch(error => {
                console.error('Error fetching or processing the map data:', error);
            });
    }

    function init_jinan() {
        var myChart = echarts.init(document.getElementById('city_map'));

        // 显示加载动画
        myChart.showLoading();

        // 济南市各区的房源数量和均价（硬编码数据）
        var jsonData = [
            ["区县", "房源数量", "均价 (元/平方米)"],
            ["历下区", 20000, 25000],
            ["市中区", 18000, 23000],
            ["槐荫区", 16000, 22000],
            ["天桥区", 14000, 21000],
            ["历城区", 19000, 20000],
            ["长清区", 8000, 18000],
            ["章丘区", 10000, 17000],
            ["济阳区", 7000, 16000],
            ["莱芜区", 6000, 15000],
            ["钢城区", 5000, 14000],
            ["平阴县", 4000, 13000],
            ["商河县", 3000, 12000]
        ];

        // 解析数据并初始化济南市地图
        var parsedData = parseJinanData(jsonData);
        initJinanMap(parsedData, myChart);
    }


    function init_zibo() {
        var myChart = echarts.init(document.getElementById('city_map'));

        // 显示加载动画
        myChart.showLoading();

        //潍坊市各区的房源数量和均价（硬编码数据）
        var jsonData = [
            ["区", "房源总数", "二手房数量"],
            ["张店区", 12000, 4000],
            ["淄川区", 10000, 3500],
            ["博山区", 9000, 3000],
            ["临淄区", 11000, 3800],
            ["周村区", 8000, 2800],
            ["桓台县", 7000, 2500],
            ["高青县", 6000, 2000],
            ["沂源县", 5000, 1800]
        ];

        // 解析数据并转换为适用于ECharts的数据格式
        function parseData(jsonData) {
            var data = [];
            for (var i = 1; i < jsonData.length; i++) {
                var row = jsonData[i];
                if (row && row.length >= 3) {
                    data.push({
                        name: row[0],   // 区县名称
                        value: row[1],  // 房源数量
                        avgPrice: row[2]  // 均价
                    });
                }
            }
            return data;
        }

        // 初始化地图
        function initJinanMap(data) {
            myChart.hideLoading();

            // 使用地图数据 URL
            fetch('https://geo.datav.aliyun.com/areas_v3/bound/370300_full.json') // 济南市地图
                .then(response => response.json())
                .then(geoJson => {
                    echarts.registerMap('jinan', geoJson);

                    // 设置地图配置
                    myChart.setOption({
                        title: {
                            text: '淄博市各区房源数据',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: function (params) {
                                var avgPrice = params.data && params.data.avgPrice != null ? params.data.avgPrice : '未知';
                                var totalValue = params.data && params.data.value != null ? params.data.value : '未知';
                                return params.name + '<br/>' +
                                    '房源数量: ' + totalValue + '<br/>' +
                                    '均价: ' + avgPrice + '元/平方米';
                            },
                            textStyle: {
                                fontSize: 20 // 设置提示框字体大小为 12
                            }
                        },
                        visualMap: {
                            min: 0,
                            max: 25000,
                            left: 'left',
                            top: 'bottom',
                            text: ['高', '低'],
                            inRange: {
                                color: ['#e0f7fa', '#006064']
                            },
                            calculable: true
                        },
                        series: [
                            {
                                name: '房源数据',
                                type: 'map',
                                map: 'jinan',
                                label: {
                                    show: true,
                                    fontSize: 15
                                },
                                data: data
                            }
                        ]
                    });
                })
                .catch(error => {
                    console.error('Error fetching or processing the map data:', error);
                });
        }

        // 解析数据并初始化淄博市地图
        var parsedData = parseData(jsonData);
        initJinanMap(parsedData);
    }


    function init_qingdao() {
        var myChart = echarts.init(document.getElementById('city_map'));

        // 显示加载动画
        myChart.showLoading();

        //青岛市各区的房源数量和均价（硬编码数据）
        var jsonData = [
            ["区", "房源总数", "二手房数量"],
            ["市南区", 15000, 5000],
            ["市北区", 14000, 4500],
            ["李沧区", 12000, 4000],
            ["崂山区", 13000, 4500],
            ["城阳区", 11000, 3500],
            ["黄岛区", 16000, 5500],
            ["即墨区", 10000, 3000],
            ["胶州市", 8000, 2500],
            ["平度市", 7000, 2000],
            ["莱西市", 6000, 1500]
        ];

        // 解析数据并转换为适用于ECharts的数据格式
        function parseData(jsonData) {
            var data = [];
            for (var i = 1; i < jsonData.length; i++) {
                var row = jsonData[i];
                if (row && row.length >= 3) {
                    data.push({
                        name: row[0],   // 区县名称
                        value: row[1],  // 房源数量
                        avgPrice: row[2]  // 均价
                    });
                }
            }
            return data;
        }

        // 初始化地图
        function initJinanMap(data) {
            myChart.hideLoading();

            // 使用地图数据 URL
            fetch('https://geo.datav.aliyun.com/areas_v3/bound/370200_full.json') // 济南市地图
                .then(response => response.json())
                .then(geoJson => {
                    echarts.registerMap('jinan', geoJson);

                    // 设置地图配置
                    myChart.setOption({
                        title: {
                            text: '青岛市各区房源数据',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: function (params) {
                                var avgPrice = params.data && params.data.avgPrice != null ? params.data.avgPrice : '未知';
                                var totalValue = params.data && params.data.value != null ? params.data.value : '未知';
                                return params.name + '<br/>' +
                                    '房源数量: ' + totalValue + '<br/>' +
                                    '均价: ' + avgPrice + '元/平方米';
                            },
                            textStyle: {
                                fontSize: 20 // 设置提示框字体大小为 12
                            }
                        },
                        visualMap: {
                            min: 0,
                            max: 25000,
                            left: 'left',
                            top: 'bottom',
                            text: ['高', '低'],
                            inRange: {
                                color: ['#e0f7fa', '#006064']
                            },
                            calculable: true
                        },
                        series: [
                            {
                                name: '房源数据',
                                type: 'map',
                                map: 'jinan',
                                label: {
                                    show: true,
                                    fontSize: 15
                                },
                                data: data
                            }
                        ]
                    });
                })
                .catch(error => {
                    console.error('Error fetching or processing the map data:', error);
                });
        }

        // 解析数据并初始化青岛市地图
        var parsedData = parseData(jsonData);
        initJinanMap(parsedData);
    }


    function init_weifang() {
        var myChart = echarts.init(document.getElementById('city_map'));

        // 显示加载动画
        myChart.showLoading();

        //潍坊市各区的房源数量和均价（硬编码数据）
        var jsonData = [
            ["区", "房源总数", "二手房数量"],
            ["潍城区", 10000, 3500],
            ["寒亭区", 9000, 3200],
            ["坊子区", 8500, 3000],
            ["奎文区", 11000, 4000],
            ["青州市", 9500, 3300],
            ["诸城市", 10500, 3800],
            ["寿光市", 12000, 4200],
            ["安丘市", 8000, 2800],
            ["高密市", 9000, 3400],
            ["昌邑市", 8500, 3100],
            ["临朐县", 7000, 2500],
            ["昌乐县", 7500, 2700]
        ];

        // 解析数据并转换为适用于ECharts的数据格式
        function parseData(jsonData) {
            var data = [];
            for (var i = 1; i < jsonData.length; i++) {
                var row = jsonData[i];
                if (row && row.length >= 3) {
                    data.push({
                        name: row[0],   // 区县名称
                        value: row[1],  // 房源数量
                        avgPrice: row[2]  // 均价
                    });
                }
            }
            return data;
        }

        // 初始化地图
        function initJinanMap(data) {
            myChart.hideLoading();

            // 使用地图数据 URL
            fetch('https://geo.datav.aliyun.com/areas_v3/bound/370700_full.json') // 济南市地图
                .then(response => response.json())
                .then(geoJson => {
                    echarts.registerMap('jinan', geoJson);

                    // 设置地图配置
                    myChart.setOption({
                        title: {
                            text: '青岛市各区房源数据',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: function (params) {
                                var avgPrice = params.data && params.data.avgPrice != null ? params.data.avgPrice : '未知';
                                var totalValue = params.data && params.data.value != null ? params.data.value : '未知';
                                return params.name + '<br/>' +
                                    '房源数量: ' + totalValue + '<br/>' +
                                    '均价: ' + avgPrice + '元/平方米';
                            },
                            textStyle: {
                                fontSize: 20 // 设置提示框字体大小为 12
                            }
                        },
                        visualMap: {
                            min: 0,
                            max: 25000,
                            left: 'left',
                            top: 'bottom',
                            text: ['高', '低'],
                            inRange: {
                                color: ['#e0f7fa', '#006064']
                            },
                            calculable: true
                        },
                        series: [
                            {
                                name: '房源数据',
                                type: 'map',
                                map: 'jinan',
                                label: {
                                    show: true,
                                    fontSize: 15
                                },
                                data: data
                            }
                        ]
                    });
                })
                .catch(error => {
                    console.error('Error fetching or processing the map data:', error);
                });
        }

        // 解析数据并初始化潍坊市地图
        var parsedData = parseData(jsonData);
        initJinanMap(parsedData);
    }


    function init_heze() {
        var myChart = echarts.init(document.getElementById('city_map'));

        // 显示加载动画
        myChart.showLoading();

        //青岛市各区的房源数量和均价（硬编码数据）
        var jsonData = [
            ["区", "房源总数", "二手房数量"],
            ["牡丹区", 12000, 4000],
            ["定陶区", 8000, 3000],
            ["曹县", 9000, 3500],
            ["单县", 8500, 3200],
            ["成武县", 7000, 2500],
            ["巨野县", 9500, 3600],
            ["郓城县", 8800, 3300],
            ["鄄城县", 7500, 2800],
            ["东明县", 8200, 3100]
        ];

        // 解析数据并转换为适用于ECharts的数据格式
        function parseData(jsonData) {
            var data = [];
            for (var i = 1; i < jsonData.length; i++) {
                var row = jsonData[i];
                if (row && row.length >= 3) {
                    data.push({
                        name: row[0],   // 区县名称
                        value: row[1],  // 房源数量
                        avgPrice: row[2]  // 均价
                    });
                }
            }
            return data;
        }

        // 初始化地图
        function initJinanMap(data) {
            myChart.hideLoading();

            // 使用地图数据 URL
            fetch('https://geo.datav.aliyun.com/areas_v3/bound/371700_full.json') // 济南市地图
                .then(response => response.json())
                .then(geoJson => {
                    echarts.registerMap('jinan', geoJson);

                    // 设置地图配置
                    myChart.setOption({
                        title: {
                            text: '菏泽市各区房源数据',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: function (params) {
                                var avgPrice = params.data && params.data.avgPrice != null ? params.data.avgPrice : '未知';
                                var totalValue = params.data && params.data.value != null ? params.data.value : '未知';
                                return params.name + '<br/>' +
                                    '房源数量: ' + totalValue + '<br/>' +
                                    '均价: ' + avgPrice + '元/平方米';
                            },
                            textStyle: {
                                fontSize: 20 // 设置提示框字体大小为 12
                            }
                        },
                        visualMap: {
                            min: 0,
                            max: 25000,
                            left: 'left',
                            top: 'bottom',
                            text: ['高', '低'],
                            inRange: {
                                color: ['#e0f7fa', '#006064']
                            },
                            calculable: true,
                            {#在每个区域上设置点#}


                        },
                        series: [
                            {
                                name: '房源数据',
                                type: 'map',
                                map: 'jinan',
                                label: {
                                    show: true,
                                    fontSize: 15
                                },
                                data: data
                            }
                        ]
                    });
                })
                .catch(error => {
                    console.error('Error fetching or processing the map data:', error);
                });
        }

        // 解析数据并初始化青岛市地图
        var parsedData = parseData(jsonData);
        initJinanMap(parsedData);
    }

    function init_shandong() {
        let myChart = echarts.init(document.getElementById('city_map'));

        // 显示加载动画
        myChart.showLoading();

        //潍坊市各区的房源数量和均价（硬编码数据）
        let jsonData = [
            ["市", "房源总数", "二手房数量"],
            ["济南市", 150000, 50000],
            ["青岛市", 180000, 60000],
            ["烟台市", 130000, 45000],
            ["潍坊市", 120000, 42000],
            ["淄博市", 110000, 40000],
            ["济宁市", 125000, 48000],
            ["泰安市", 100000, 35000],
            ["威海市", 90000, 32000],
            ["日照市", 80000, 30000],
            ["临沂市", 140000, 50000],
            ["德州市", 105000, 38000],
            ["聊城市", 100000, 36000],
            ["滨州市", 95000, 34000],
            ["菏泽市", 110000, 40000],
            ["东营市", 92000, 34500],
            ["枣庄市", 100000, 40300],
        ];

        // 解析数据并转换为适用于ECharts的数据格式
        function parseData(jsonData) {
            var data = [];
            for (var i = 1; i < jsonData.length; i++) {
                var row = jsonData[i];
                if (row && row.length >= 3) {
                    data.push({
                        name: row[0],   // 区县名称
                        value: row[1],  // 房源数量
                        avgPrice: row[2]  // 均价
                    });
                }
            }
            return data;
        }

        // 初始化地图
        function initShandongMap(data) {
            myChart.hideLoading();
            let scatterData = [
                {
                    value:[117.00,36.40]
                }
             ]

            // 使用地图数据 URL
            fetch('https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json') // 济南市地图
                .then(response => response.json())
                .then(geoJson => {
                    echarts.registerMap('shandong', geoJson);

                    // 设置地图配置
                    myChart.setOption({
                        title: {
                            text: '山东省各市房源数据',
                            left: 'center'
                        },
                        tooltip: {

                            {#trigger: 'item',#}
                            {#trigger: 'always',#}
                            alwaysShowContent:true,
                            formatter: function (params) {
                                var avgPrice = params.data && params.data.avgPrice != null ? params.data.avgPrice : '未知';
                                var totalValue = params.data && params.data.value != null ? params.data.value : '未知';
                                return params.name + '<br/>' +
                                    '房源数量: ' + totalValue + '<br/>' +
                                    '均价: ' + avgPrice + '元/平方米';
                            },
                            textStyle: {
                                fontSize: 12 // 设置提示框字体大小为 12
                            }
                        },
                        visualMap: {
                            min: 0,
                            max: 250000,
                            left: 'left',
                            top: 'bottom',
                            text: ['高', '低'],
                            inRange: {
                                color: ['#e0f7fa', '#006064']
                            },
                            calculable: true
                        },
                        geo:{
                            type:"map",
                            map:"shandong",
                            roam:true,
                            label:{
                                show:true
                            },
                         },
                        series: [
                            {
                                data: scatterData,
                                type: 'effectScatter',
                                coordinateSystem: 'geo',
                                rippleEffect:{
                                    scale: 10
                                },
                            },
                            {
                                geoIndex:0,
                                type: 'map',
                                data: data
                            }
                        ]
                    });
                })
                .catch(error => {
                    console.error('Error fetching or processing the map data:', error);
                });
        }

        // 解析数据并初始化山东省地图
        let parsedData = parseData(jsonData);
        initShandongMap(parsedData);
    }


    let prev_city = null;

    function clk_city(lab, city_name) {

        {#init_jinan();#}
        switch (city_name) {
            case("青岛"):
                init_qingdao();
                break;
            case("济南"):
                init_jinan();
                break;
            case("淄博"):
                init_zibo();
                break;
            case("菏泽"):
                init_heze();
                break;
            case("潍坊"):
                init_weifang();
                break;
        }

        console.log("点击城市:" + city_name);
        if (prev_city != null) {
            prev_city.style.backgroundColor = "";
            prev_city.style.color = "";

        }
        lab.style.backgroundColor = "#a15d93";
        lab.style.color = "white";
        prev_city = lab;

    }

</script>
</body>
</html>